@import '@/styles/common/variables.scss';
@import './phone_details.scss';
@import './common.scss';


.basicData{
  display: flex;
  max-width: $homeW;
  padding-bottom: 2.95%;
  // padding-bottom: 56px;
  // margin: 40px auto 0px;
  margin: 32px auto 0 ;
  z-index: 0;
  .el-button.el-button--default {
    background-color: #CCCCCC;
    color: #FFFFFF;
    font-size: 14px;padding: 0 24px;border-color: #CCCCCC;
    &:hover{border-color: #CCCCCC;padding: 0 24px;}
    cursor: auto;
}
  .guide{
    width: calc(50% - 20px);
    margin-right: 20px;
  }
  .basic{
    width: calc(50% - 20px);
    margin-left: 20px;
  }
}


//  顶部左侧
.guide{

  .productImage{
    margin-top: 16px;
    height: 0;
    padding-bottom: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .productImage{
    .el-image__error{
      position: absolute;
    }
  }
  .breadcrumb{
    cursor: pointer;
    font-size: 14px;
    color: #7E7E7E;
    .second{
      color: #363434;
    }
    .title{
      color: #363434;
    }
  }
}
.basic{
  .input_container,
  .output_container{
    margin-top: 8px;
  
    i{
      display: none;
    }
  }
  .product_detail_btn{
    .icon-Share_actived{
      display: none;
    }
  }
 
}

.extendData{
  height: 80px;
  border-bottom: 1px solid #F2F1F0;
  >div.productDetail{
    height: 100%;
    width: $homeW;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .category{
      height: 100%;
      white-space: nowrap;
      &:hover{
        >p{
          color: #7e7e7e;
        }
      }
      >p{
        color: #363434;
        font-size: 20px;
        cursor: pointer;
        display: inline-block;
        margin-right: 48px;
        height: 100%;
        line-height: 80px;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          height: 2px;
          width: 100%;
          background: #7e7e7e;
          bottom: 0;
          left: 0;
          z-index: 10;
          -webkit-transform: scaleX(0);
          transform: scaleX(0);
          -webkit-transition: .3s ease-out;
          transition: .3s ease-out;
        }
        &.active{
          color: #363434;
          &::after{
            background: #363434;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
        &:hover{
          color: #7e7e7e;
          &::after{
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
        // &.active{
        
        //   color: #363434;
        //   border-bottom: 3px solid #363434;
        // }
      }
    }
    .product_info{
      display: flex;
      align-items: center;
      justify-content: space-between;
      display: none;
      .product_info_image{ // 图片
        width: 48px;
        height: 48px;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .product_info_title{
        margin-left: 16px;
        width: calc(100% - 301px);
        .title{
          color: #363434;
          font-size: 14px;
          font-weight: 700;
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

        }
        .el-rate__icon{
          font-size: 12px;
          cursor: pointer;
        }
        .el-rate__text{
          font-size: 12px;
          cursor: pointer;
        }

      }
      // 按钮
      .el-button{
        min-width: 216px;
        color: #363434;
        padding: 0 16px;
        background:  linear-gradient(#FFEFD5, #FFDBAB);
        border: none;
        margin-left: 24px;
        &.el-button--search{
          background:  linear-gradient(#FFDBAB, #FEBD69);
          &:hover{
            background: linear-gradient(#FEBD69, #F3A847);
          }
        }
      }
    }

  }
 
}
// 评论 pc
#reviews{
  margin-top: 32px;
  .reviews{
    position: relative;
    padding-top: 32px;

    .commentList{
      &.phoneShow{
        display: none;
      }
      &.pcShow{
        width: 75%;
        margin: 0 auto 0px;
        display: block;
        .comment_total{
          border-bottom:  1px solid #EBEAEA;
          display: flex;
          align-items: center;
          padding-bottom: 15px;
          .el-rate__icon{
            font-size: 20px;
            margin-right: -4px;
          }
          >span{
            margin-right: 16px;
          }
        }
        .commentItem{
          border-bottom:  1px solid #EBEAEA;
          padding: 24px 0;
          .comment_rate_name{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            .name{
              color: #363434;
              font-size: 14px;
            }
          }
          .comment_attributes_time{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #CCCCCC;
          }
          .commentTitle{
            color: #363434;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 6px;
          }
          .commentContent{
            color: #666666;
            font-size: 14px;
            margin-bottom: 16px;
          }
          .el-rate__icon{
            margin-right: -2px;
            font-size: 16px;
          }
          .imageList{
            .el-image{
              width: 5.15vw;
              height: 5.15vw;
              margin-right: 1vw;
              margin-bottom: 16px;
              cursor: pointer;
              &:nth-of-type(10n){
                margin-right: 0px;
              }
              float: left;
              >img{
                object-fit: cover;
              }
            }
          }
        }
        .el-pagination{
          margin-top: 24px;
          .el-pager{
            .number{
              color: #666666;
              font-size: 14px;
              font-weight: normal;
              &.active{
                color: #363434;
              }
            }
          }
          .el-pagination__editor.el-input{
            height: 28px;
          }
        }
      }


    }
  
    .btn_more{
      text-align: center;
      margin-top: 24px;
      .el-button--search{
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        border-radius: 25px;
        min-width: 80px;
      }
    }
  
  }
}

// 说明书 pc
#directions{
  width: 75%;
  margin: 32px auto 0;
  position: relative;
  padding-top: 32px;
  >p{
    color: #363434;
    font-size: 24px;
    padding: 0 0 32px;
    text-align: center;
    border-bottom: 1px solid #F2F1F0;
  }
  >div{
    padding: 32px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F2F1F0;
    &:last-of-type{
      border-bottom: none;
    }
    >p{
      width: 260px;
      margin-right: 40px;
      color: #363434;
      font-size: 16px;
      i{
        display: none
      }
    }
    >div{
      width: calc(100% - 260px);
      color: #7e7e7e;
      font-size: 16px;
      white-space: break-spaces;
      line-height: 1.8;
      a{
        color: #1890FF;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}

#recommendation{
  width: $homeW;
  margin: auto;
  position: relative;
  .productContent{
    display: block;
  }
  .swiper-container{
    display: none;
  }

  >p{
    color: #363434;
    font-size: 32px;
    text-align: center;
    margin-bottom: 24px;
    padding-top: 32px;
  }
  .productItem{
    width: calc((100% - 2.25%*3) / 4);
    margin-right: 2.25%;
    padding-bottom: 0;
    &:nth-of-type(4n){
      margin-right: 0;
    }
  }
}


$galleryH:24px; // 图文字和图片的间距
.gallery{
  width: $homeW;
  margin: 24px auto 0;
  padding-top: 32px ;
  >div{
    margin-bottom: 40px;

  }
  .gallery_container{
    opacity: 0;
    .el-image,
    .inputWord{
      opacity: 0;
      transition: all 1.2s ease;
      position: relative;
      transform: translateY(150px);
    }
    &.visible{
      opacity: 1;
      top: 0;
      .el-image,
      .inputWord{
        opacity: 1;
        top: 0;
        transform: translateY(0);
      }

    }
  }
  .imageTextStyle1-2,
  .imageTextStyle1-1{
    width: 100%;
    >div{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-image{
        width: calc(50% - 20px);
        padding-bottom: 33%;
        height: 0;
        margin-right: 20px;
      }
      .inputWord{
        width: calc(50% - 20px);
        margin-left: 20px;
        height: 100%;
      }
    }

  }
  .imageTextStyle1-2{
    >div{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow:row-reverse;
      width: 100%;
      .el-image{
        margin-right: 0px;
        margin-left: 20px;
      }
      .inputWord{
        margin-right: 40px;
        margin-left: 0px;

      }
    }
  }
  .imageTextStyle1-4,
  .imageTextStyle1-3{
    >div{
      width: 100%;
      font-size: 0;
    }
    .el-image{
      width: 100%;
      height: 0;
      padding-bottom: 50%;
    }
    .inputWord{
      text-align: center;
      .title{
        -webkit-line-clamp: 1; 
      }
      .description{
        min-height: 46px;
      }
    }
  }
  .imageTextStyle1-3{
    .inputWord{
      margin-top: $galleryH;
    }
  }
  .imageTextStyle1-4{
    >div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-flow: column-reverse;
      align-items: center;
    }
    .inputWord{
      margin-bottom: $galleryH;
    }
  }
  .imageTextStyle2-3,
  .imageTextStyle2-2,
  .imageTextStyle2-1{
    width: 100%;
    align-items: flex-start;
    >div{
      width: calc(50% - 20px);
      &:first-of-type{margin-right: 20px;}
      &:last-of-type{margin-left: 20px;}
      display: inline-block;
      .el-image{
        width: 100%;
        height: 0;
        padding-bottom: 75%;
      }
      .inputWord{
        text-align: center;
      }
    }

  }
  .imageTextStyle2-1 {
    .inputWord{
      margin-top: $galleryH;
    }
  }
  .imageTextStyle2-2{
    display: flex;
    align-items: flex-end;
    >div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-flow: column-reverse;
      align-items: center;
    }
    .inputWord{
      margin-bottom: $galleryH;
    }
  }
  .imageTextStyle2-3{
    display: flex;
    align-items: flex-end;
    >div:last-of-type{
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-flow: column-reverse;
      align-items: center;
      .inputWord{
        margin-bottom: $galleryH;
      }

    }
    >div:first-of-type{
      .inputWord{
        margin-top: $galleryH;
      }
    }
    
  }
  .imageTextStyle3-2,
  .imageTextStyle3-1{
    display: flex;
    width: 100%;
    >div{
      width: calc(33.3% - 26.7px);
      &:first-of-type{margin-right: 20px;}
      &:nth-of-type(2){margin-right: 20px; margin-left: 20px;}
      &:last-of-type{margin-left: 20px;}
      display: inline-block;
      .el-image{
        width: 100%;
        height: 0;
        padding-bottom: 75%;
      }
      .inputWord{
        text-align: center;
      }
    }
  }
  .imageTextStyle3-2{
    align-items: flex-end;
    >div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-flow: column-reverse;
      align-items: center;
    }
    .inputWord{
      margin-bottom: $galleryH;

    }
  }


  .imageTextStyle3-1{
    align-items: flex-start;
    .inputWord{
      margin-top: $galleryH;
    }
  }

  .inputWord{
    width: 100%;
    .title{
      color: #363434;
      font-size: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .description{
      color: #7E7E7E;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-top: 16px;
      word-break: break-word;
    }
  }
  .el-image{
    background-size: cover;
    background-repeat: no-repeat;
  }
  .imageTextStyle3-2,
  .imageTextStyle3-1,
  .imageTextStyle2-3,
  .imageTextStyle2-2,
  .imageTextStyle2-1{
    >div{
      font-size: 0;
    }
    .inputWord{
      .title{
        min-height: 65px;
      }
      .description{
        min-height: 40px;
      }

    }
  }

}
 


.scroll{
  .extendData{
    position: fixed;
    top: 56px;
    width: 100%;
    z-index: 10;
    background-color: #FFFF;
    margin-top: 0;
    div.productDetail {
      .product_info{
        display: flex;
      }
    }

  } 
  &.bgc_grey  {
    background-color: #FFFF !important;
  }
}
.bgc_white.detail{
  top: 0 ;

}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}


.main .module_share{
  display: block;
  position: fixed;
  right: 0;
  bottom: 120px;
  border-radius: 16px  0px  0px  16px  ;
  background-color: #FFFFFF;
  z-index: 100;
  width: 64px;
  text-align: center;
  box-shadow: -4px 0 8px rgba(54, 52, 52, 0.08);
  padding: 0 16px;
  a{
    display: block;
    margin-top: 32px;
    font-size: 0;
    position: relative;
    cursor: pointer;
    svg{ 
      width: 32px;
      height: 32px;
    }
    &:hover{
      .svgHover{opacity: 1;}
      .svgNormal{opacity: 0;}
    }
    .svgHover{opacity: 0;position: absolute;left: 0;top: 0;}
    .svgNormal{opacity: 1; }
    &:last-of-type{
      margin-bottom: 32px;
    }
  }
}

